<template>
  <!-- :include-level="[3, 4]" -->
  <v-md-editor
    v-model="markdown"
    :mode="mode"
    :height="height"
    :toolbar="toolbar"
    @upload-image="handleUploadImage"
    :disabled-menus="[]"
    left-toolbar="undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image code"
  ></v-md-editor>
</template>

<script setup>
import { uploadfiles } from "@/api/login.js";
import { useVModel } from "@vueuse/core";
import { ref } from "vue";
const props = defineProps({
  //modelValue固定写法，父组件通过v-model传递的参数
  modelValue: String,
  mode: {
    type: String,
    default: "editable",
  },
  height: {
    type: String,
    default: "auto",
  },
});
const markdown = useVModel(props);
const toolbar = ref({});
const handleUploadImage = async (event, insertImage, files) => {
  // 拿到 files 之后上传到文件服务器，然后向编辑框中插入对应的内容
  console.log(files);
  const formData = new FormData();
  files.forEach((item) => {
    formData.append("file", item);
  });
  try {
    const resImg = await uploadfiles(formData);
    const { url } = resImg;
    const urls = url.split(",");
    urls.forEach((item) => {
      insertImage({
        url: item,
        desc: "图片",
        width: "200",
        height: "auto",
      });
    });
    // 此处只做示例
  } catch (error) {}
};
</script>